<template>
  <div class="project">
    <!-- 预警通知配置  -->
    <div class="wrapper">
      <div class="wb_header">
        <div>预警通知配置</div>
      </div>
      <div class="warp warp1">
        <el-form :inline="true" :model="queryFrom" class="demo-form-inline"> 
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择项目">
              <el-option label="常德省厅普适型检测项目" value="shanghai"></el-option> 
              <el-option label="常德普适型地灾检测(1170)" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="请选择监测点">
              <el-option label="常德市石门县南北镇潘坪村雷家山滑坡" value="shanghai"></el-option> 
              <el-option label="常德澧县甘溪镇顺桥地灾隐患点" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="">
            <el-select v-model="queryFrom.region" placeholder="预警等级" class="input_inner_selct">
              <el-option label="蓝色预警" value="shanghai"></el-option>  
              <el-option label="黄色预警" value="shanghai"></el-option>  
              <el-option label="橙色预警" value="shanghai"></el-option>  
              <el-option label="红色预警" value="shanghai"></el-option>  
            </el-select>
          </el-form-item> 
          <el-form-item>
            <el-button type="primary">查询</el-button>
            <el-button>重置</el-button>
          </el-form-item>
        </el-form>
      </div>  
      <div class="tableBtn">
        <el-button type="primary" plain>批量配置</el-button>
      </div>
      <el-table v-loading="loading" :data="configList">  
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="监测点名称" align="center" prop="jcdmc" />
        <el-table-column label="所属项目" align="center" prop="ssxm" :show-overflow-tooltip="true" />
        <el-table-column label="预警短信通知" width="140" align="center" prop="yjdxtz" :show-overflow-tooltip="true" />
        <el-table-column label="预警邮件通知" width="140" align="center" prop="yjyjtz" :show-overflow-tooltip="true" />
        <el-table-column label="确认预警邮件通知" width="140" align="center" prop="qryjyjtz" :show-overflow-tooltip="true" />
        <el-table-column label="是否预警喇叭联动" width="140" align="center" prop="sfyjlbld" :show-overflow-tooltip="true" />
        <el-table-column label="预警等级" width="140" align="center" prop="yjdj" :show-overflow-tooltip="true" >
          <template slot-scope="scope">
            <div class="cell">
              <el-tag v-show="scope.row.yjdj" :id="getId(scope.row.yjdj)">{{ scope.row.yjdj }}</el-tag> 
            </div>
          </template>
        </el-table-column>
        <el-table-column label="预警时间" width="180" align="center" prop="yjsj" :show-overflow-tooltip="true" /> 
        <el-table-column label="操作" width="140" align="center" class-name="small-padding fixed-width">
          <!-- <template slot-scope="scope"> -->
          <template> 
            <el-button size="mini" type="text">预警人员</el-button>  
            <el-button size="mini" type="text">通知配置</el-button>  
          </template>
        </el-table-column>
      </el-table>   
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    
    </div>
  </div>
</template>

<script>
export default {
data() {
  return {
    queryFrom: {},
    loading: false,
    configList: [
        {"jcdmc":"常德市石门县南北镇潘坪村雷家山滑坡","ssxm":"湖南省石门县南北镇潘坪村雷家山滑坡","yjdxtz":"不发送","qryjdxtz":"不发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"","yjsj":"2021-03-08 11:16:42"},
        {"jcdmc":"常德澧县甘溪镇顺桥地灾隐患点","ssxm":"常德市澧县甘溪镇顺桥地灾监测项目","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"","yjsj":"2024-02-02 10:22:25"},
        {"jcdmc":"临澧县修梅镇高桥村白堰五组滑坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"蓝色预警","yjsj":"2024-02-02 10:00:00"},
        {"jcdmc":"临澧县太浮镇响水村朱伦组朱伦桥河岸滑坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"","yjsj":"2023-11-30 16:20:24"},
        {"jcdmc":"临澧县太浮镇胜利村大方组陈二胜利小学不稳定斜坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"","yjsj":"2024-01-10 08:58:19"},
        {"jcdmc":"临澧县停弦渡镇福船村1组华家屋场滑坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"蓝色预警","yjsj":"2024-02-02 17:23:20"},
        {"jcdmc":"临澧县停弦渡镇山洲村童16组连三坡滑坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"","yjsj":"2024-01-10 08:59:39"},
        {"jcdmc":"桃源县浔阳街道梅溪桥村关斗山组杨利军等3户滑坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"","yjsj":"2023-10-27 09:10:10"},
        {"jcdmc":"临澧县修梅镇观音洞村窝儿曹门滑坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"蓝色预警","yjsj":"2024-02-02 10:00:02"},
        {"jcdmc":"临澧县修梅镇林家垭村周家二组滑坡","ssxm":"常德普适型地灾监测（1170）","yjdxtz":"仅向平台运维人员发送","qryjdxtz":"预警人员与客户均发送","yjyjtz":"不发送","qryjyjtz":"不发送","sfyjlbld":"不联动","yjdj":"","yjsj":"2024-01-10 09:01:56"}
      ],
    total: 10,
    queryParams:{
      pageNum: 1,
      pageSize: 10,
    },
    devTypeList:[
      {label: "未激活",value: "0"},
      {label: "在线",value: "1"},
      {label: "离线",value: "2"},
      {label: "已禁用",value: "3"},
      {label: "维护中",value: "4"},
      {label: "维护结束",value: "5"}
    ]
  }
},
methods:{
  getList(){}, 
  getId(data){
    switch (data) {
      case "蓝色预警":
        return "warnLevel1"; 
      case "黄色预警":
        return "warnLevel2"; 
      case "橙色预警":
        return "warnLevel3"; 
      case "红色预警":
        return "warnLevel4"; 
    }
  },
}
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/tablePage.scss"; 
.el-select,.el-input{
  width: 14.6vw !important;
}
.footer{
  div{
    margin-top: 10px;
    font-size: 15px;
    color: #303133;
  }
}
.input_inner_selct{
  width: 100px;
}
</style>